<template>
<div class="history-table">
  <el-row>
    <el-col :span="12" :offset="12" style="text-align: right; padding-right: 2em">
      <el-input v-model="inputText" style="width: 50%; margin-right: 1em" placeholder="search login"/>
      <el-button type="primary" @click="onSearch">search</el-button>
    </el-col>
  </el-row>
  <div class="table_resource" style="text-align:center">
    <el-table :data="showData" style="width: 100%">
      <el-table-column prop="login" label="Login" align="center">
      </el-table-column>
      <el-table-column prop="siteCode" label="SiteCode" align="center">
      </el-table-column>
      <el-table-column prop="number" label="TT Number" align="center">
      </el-table-column>
      <el-table-column prop="case" label="Case"  align="center">
      </el-table-column>
      <el-table-column prop="date" label="Date" align="center">
      </el-table-column>
    </el-table>
  </div>
  <div class="resource-page">
    <el-pagination background
                   layout="prev, pager, next"
    :page-size="pagesize"
    :total="filterData.length"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange" />
  </div>
</div>
</template>

<script>
import { getAppoinmentHistoryData } from '../../api'
export default {
  created () {
    getAppoinmentHistoryData().then(data => {
      this.list = data
    })
  },
  data () {
    return {
      inputText: '',
      keywords: '',
      list: [],
      pagesize: 10,
      currpage: 1
    }
  },
  methods: {
    handleCurrentChange (cpage) {
      this.currpage = cpage
    },
    handleSizeChange (psize) {
      this.pagesize = psize
    },
    onSearch () {
      this.keywords = this.inputText
    }
  },
  computed: {
    filterData () {
      const _this = this
      if (this.keywords == null || this.keywords.trim() === '') {
        return this.list
      } else {
        debugger
        return this.list.filter(item => {
          _this.currpage = 1
          return item.login.indexOf(this.keywords) >= 0
        })
      }
    },
    showData () {
      return this.filterData.slice((this.currpage - 1) * this.pagesize, this.currpage * this.pagesize)
    }
  }
}
</script>
<style>
  .history-table {
    margin-top: 20px;
  }

  .resource-page {
    text-align: right;
    padding-right: 2em;
    margin-top: 10px;
  }
</style>
